<route>
    {
        meta: {
            layout: 'index',
            title:'套管信息管理'
        }
    }  
</route>
<template>
    <div class="app-container">
        <a-row>
            <a-input-search v-model:value="searchKey" placeholder="请输入套管公称尺寸信息" enter-button="搜索"
                style="width: 250px; margin-bottom: 10px;" @search="handleQuery()" />
            <a-button style="margin-left: 10px;" type="dashed" @click="reset">重置</a-button>
            <a-button type="primary" style="margin-left: auto; margin-bottom: 10px; width: 100px;" @click="addItem">
                <template #icon><plus-outlined /></template>新增
            </a-button>
        </a-row>

        <a-table :dataSource="dataSource" :columns="columns" bordered :pagination="false">
            <template #bodyCell="{ column, text, record }">
                <!-- <template v-if="['casingId'].includes(column.dataIndex)">
                    <div>
                        <a-input v-if="editableData[record.id]" v-model:value="editableData[record.id][column.dataIndex]"
                            style="margin: -5px 0" />
                        <template v-else>
                            {{ text }}
                        </template>
                    </div>
                </template> -->
                <template
                    v-if="['outerDiameter', 'innerDiameter', 'weight', 'diameter', 'thickness'].includes(column.dataIndex)">
                    <div>
                        <a-input-number v-if="editableData[record.id]"
                            v-model:value="editableData[record.id][column.dataIndex]" :min="0"
                            style="margin: -5px 0;width: 100%;" />
                        <template v-else>
                            {{ text }}
                        </template>
                    </div>
                </template>
                <template v-else-if="column.dataIndex === 'action'">
                    <div style="margin-right: 8px;">
                        <span v-if="editableData[record.id]">
                            <a-button type="link" @click="save(record.id)">保存 </a-button>
                            <AntdZh><a-popconfirm title="取消编辑 ?" @confirm="cancel(record.id)">
                                <a-button type="link">取消</a-button>
                            </a-popconfirm></AntdZh>
                        </span>
                        <span v-else>
                            <a-button type="link" @click="edit(record.id)">编辑</a-button>
                            <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="del(record.id)">
                                <a-button type="link" danger>删除</a-button>
                            </a-popconfirm></AntdZh>
                        </span>
                    </div>
                </template>
            </template>
        </a-table>
        <AntdZh>
            <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
                @change="getList" />
        </AntdZh>

        <!-- 新版添加或修改部门对话框 -->
        <AntdConfirmModal title="新建套管" ref="modalRef" width="700px" :keepSlot="false" @confirm="submitForm">
            <a-form :model="form" name="basic" :label-col="{ span: 10 }">
                <a-row>
                    <a-col :span="12">
                        <a-form-item label="公称尺寸" name="nominalSize" :rules="[{ required: true, message: '请输入套管公称尺寸' }]">
                            <a-input v-model:value="form.nominalSize" style="width: 150px;" placeholder="请输入套管公称尺寸"
                                addon-after="in" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="套管内径" name="innerDiameter">
                            <a-input-number v-model:value="form.innerDiameter" style="width: 150px;"
                                controls-position="right" :min="0" addon-after="mm" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="套管外径" name="outerDiameter">
                            <a-input-number v-model:value="form.outerDiameter" style="width: 150px;"
                                controls-position="right" :min="0" addon-after="mm" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="套管厚度" name="thickness">
                            <a-input-number v-model:value="form.thickness" style="width: 150px;" controls-position="right"
                                :min="0" addon-after="mm" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="套管单位质量" name="weight">
                            <a-input-number v-model:value="form.weight" style="width: 150px;" controls-position="right"
                                :min="0" addon-after="kg/m" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="套管通径" name="diameter">
                            <a-input-number v-model:value="form.diameter" style="width: 150px;" controls-position="right"
                                :min="0" addon-after="mm" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </AntdConfirmModal>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import { queryList, deleteOne, updateOne, createOne } from "@/api/tool/casing";
import { PlusOutlined } from '@ant-design/icons-vue';
import useApp from "@/hooks";
const { $, proxy } = useApp();
const modalRef = ref(null);
const data = reactive({
    form: {}
});
const { form } = toRefs(data);
const total = ref(1)
const dataSource = ref([]);
// 定义表格列配置
const columns = [
    {
        title: '公称尺寸(in)',
        dataIndex: 'nominalSize',
        key: 'nominalSize',
        width: '13%'
    },
    {
        title: '套管外径(mm)',
        dataIndex: 'outerDiameter',
        key: 'outerDiameter',
        width: '13%'
    },
    {
        title: '套管内径(mm)',
        dataIndex: 'innerDiameter',
        key: 'innerDiameter',
        width: '13%'
    },
    {
        title: '套管厚度(mm)',
        dataIndex: 'thickness',
        key: 'thickness',
        width: '15%'
    },
    {
        title: '套管单位质量(kg/m)',
        dataIndex: 'weight',
        key: 'weight',
        width: '15%'
    },
    {
        title: '套管通径(mm)',
        dataIndex: 'diameter',
        key: 'diameter',
        width: '13%'
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
    },
];
const searchKey = ref();
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });

const editableData = reactive({});
const edit = key => {
    editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.id)[0]);
};
// 保存
const save = key => {
    updateOne(editableData[key]).then(res => {
        console.log('save', res);
        $.showToast({
            title: '修改成功',
            icon: 'success'
        })
        getList()
        delete editableData[key];
    })

};
// 删除
const del = key => {
    deleteOne(key).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        getList()
        delete editableData[key];
    })
}
const cancel = key => {
    delete editableData[key];
};

// 新增
function addItem() {
    form.value = {}
    modalRef.value.openModal()
}
/** 提交按钮 */
function submitForm() {
    createOne(form.value).then(res => {
        console.log(res)
        modalRef.value.closeModal();
        getList()
    })
}

/** 查询井列表 */
function getList() {
    queryList(query.value).then((response) => {
        dataSource.value = response.content;
        total.value = response.totalElements;
    });
}
getList();


/** 搜索按钮操作 */
function handleQuery() {
    query.value.searchKey = searchKey;
    getList();
}

/** 表单重置 */
function reset() {
    searchKey.value = '';
    query.value = {
        pageNum: 1, pageSize: 10, sortBy: 'id',
        searchKey: '',
    }
    getList();
}
</script>
  